<template>
  <div>
    <!-- 实训室开放时间管理 -->
    <div class="dingbu">
      <span>3D打印室</span>
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd()"
        >新增</el-button
      >
    </div>
    <el-container style="background-color: #fff">
      <div class="box">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            :default-sort="{ prop: 'date', order: 'descending' }"
            :header-cell-style="{
              'font-weight': '600',
              color: '#666',
              'font-size': '14px',
              'text-align': 'center',
            }"
          >
            >
            <el-table-column
              label="序号"
              style="font-weight: 600"
              sortable
              prop="item"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column prop="timegz" align="center" label="时间规则">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  icon="el-icon-edit"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  icon="el-icon-delete-solid"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tabs>
      </div>
    </el-container>
    <div class="but">
      <el-button type="primary">确定</el-button> <el-button>返回</el-button>
    </div>
    <!-- 添加或修改用户对话框 -->
    <el-dialog
      title="编辑和新增时间规则"
      :visible.sync="open"
      width="500px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="开放时间范围" prop="userName">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
           <el-checkbox v-model="checked">周一</el-checkbox>
           <el-checkbox v-model="checked1">周二</el-checkbox>
           <el-checkbox v-model="checked2">周三</el-checkbox>
           <el-checkbox v-model="checked3">周四</el-checkbox>
           <el-checkbox v-model="checked4">周五</el-checkbox>
           <el-checkbox v-model="checked5">周六</el-checkbox>
           <el-checkbox v-model="checked6">周日</el-checkbox>
        </el-form-item>
        <el-form-item label="上午开放时间" prop="age">
          <el-date-picker v-model="value3" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="下午开放时间" prop="age">
          <el-date-picker v-model="value4" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="晚上开放时间" prop="age">
          <el-date-picker v-model="value5" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="操作确认" :visible.sync="dialogVisible" width="30%">
      <span>删除操作确认</span>
      <p>确定要删除当前管理员吗？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: ["showFileName"],
  data() {
    return {
      activeName: "first",
      form: {},
      open: false,
      dialogVisible: false,
      // 表单校验
      rules: {},
      textarea1: "",
      tableData: [
        {
          date: "2016-05-03",
          name: "张小刚",
          address: "合肥学院北基地",
          time: "2021/10/11 09:00",
          age: 60,
          yytime: "2021/10/15 9:30-10:20",
          szdw: "合肥学院",
          bj: "电子电工1班2班3班",
          item: 1,
          timegz: "周一到周五 9:00-12:00 14:00-18:00 19:00-21:00:00",
        },
        {
          date: "2016-05-03",
          name: "张小刚",
          address: "合肥学院北基地",
          time: "2021/10/11 09:00",
          age: 60,
          yytime: "2021/10/15 9:30-10:20",
          szdw: "合肥学院",
          bj: "电子电工1班2班3班",
          item: 2,

          timegz: "周一到周五 9:00-12:00 14:00-18:00 19:00-21:00:00",
        },
      ],
      multipleSelection: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
      checked: true,
      checked1: false,
      checked2: false,
      checked3: false,
      checked4: false,
      checked5: false,
      checked6: false,
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.dialogVisible = true;
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.open = true;
    },
    handleAdd() {
      this.open = true;
    },
    submitForm() {
    },
    cancel() {
    },
  },
};
</script>
<style scoped >
.box {
  width: 50%;
  margin: 20px 50px;
  border: 1px solid #e9e9e9;
}

.dingbu {
  width: 50%;
  margin-left: 50px;
  margin-top: 50px;
  display: flex;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  justify-content: space-between;
}
.but {
  width: 50%;
  padding: 0px 0 50px 50px;
  box-sizing: border-box;
  text-align: center;
}
/deep/.cell {
  text-align: center !important;
}
</style> 